<!--
  版本更新（路侧App）添加页面
  User: YanZengBao
  Date: 2020-04-20
-->
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >

<style type="text/css">
    #parent {
        width: 200px;
        height: 25px;
        border: 2px solid rgba(0, 153, 255, 0.3);
    }

    #son {
        width: 0;
        height: 100%;
        background-color: #09F;
        text-align: center;
        line-height: 10px;
        font-size: 20px;
        font-weight: bold;
    }
</style>

<!-- BEGIN FORM-->
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject font-red-sunglo bold uppercase">版本更新添加</span>
            <span class="caption-helper">添加一条版本数据</span>
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal" id="save-module">
            <div class="form-body">

                    <!--  字段信息-->
                    <!-- 版本编号 字段信息-->
                        <div class="form-group">
                            <label class="col-md-3 control-label">版本编号</label>
                            <div class="col-md-7">
                                <div class="input-inline ">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                        <input type="text" class="form-control" maxlength="32" required name="code" placeholder="版本编号">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- 版本名称 字段信息-->
                        <div class="form-group">
                            <label class="col-md-3 control-label">版本名称</label>
                            <div class="col-md-7">
                                <div class="input-inline ">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                        <input type="text" class="form-control" maxlength="32" name="name" placeholder="版本名称">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- 更新文件路径 字段信息-->
                        <div class="form-group">
                            <label class="col-md-3 control-label">文件路径</label>
                            <div class="col-md-7">
                                <input type="file" id="file_upload"/>
                                <br>
                                <input type="text" id="src" class="form-control" readonly required name="url" placeholder="路径">
                                <input type="button" value="上传文件" onclick="uploadFile()"/><br>
                                <br>
                                <div id="parent" class="hide">
                                    <div id="son"> </div>
                                </div>
                            </div>
                        </div>
                    <!-- 版本内容 字段信息-->
                        <div class="form-group">
                            <label class="col-md-3 control-label">版本内容</label>
                            <div class="col-md-7">
                                <div class="input-inline ">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                        <input type="text" class="form-control" name="content" placeholder="版本内容">
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!-- 1-路测App 字段信息-->
                        <div class="form-group hide">
                            <label class="col-md-3 control-label"></label>
                            <div class="col-md-7">
                                <div class="input-inline ">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-edit"></i>
                                        </span>
                                        <input type="number" class="form-control" value="1" required digits="true" name="type" placeholder="1-路测App">
                                    </div>
                                </div>
                            </div>
                        </div>

            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-7">
                                <button type="button" class="btn green" onclick="save();">保存</button>
                                <button type="button" class="btn default" onclick="layer.close(layer_addModule);">取消</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>

<script>

    $(function(){
        //初始化页面
        initPage();
    });


    /**
     * 描述： 上传文件
     * 创建时间：2020/4/21  YanZengBao
     * 修改时间：2020/4/21  YanZengBao 加注释
     * 修改时间：
     */
    function uploadFile() {
        if($("#src").val() !=null && $("#src").val()  != ''){
            $("#src").val("");
            return layer.msg("请重新选择文件！",{icon: 2,time:2000});
        }
        // 获取上传文件，放到 formData对象里面
        var pic = $("#file_upload").get(0).files[0];
        var formData = new FormData();
        formData.append("file", pic);
        if(pic !=null && pic != ''){
            $("#parent").removeClass("hide");
            $.ajax({
                type: "POST",
                url: "/version/upload",
                data: formData,　　//这里上传的数据使用了formData 对象
                processData: false,
                //必须false才会自动加上正确的Content-Type
                contentType: false,
                //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (onprogress && xhr.upload) {
                        xhr.upload.addEventListener("progress", onprogress, false);
                        return xhr;
                    }
                },
                success: function (data) {
                    $("#src").val(data.data);
                },
            });
        }else{
            return layer.msg("请先选择文件！",{icon: 2,time:2000});
        }

    }

    function onprogress(evt) {
        var loaded = evt.loaded;                  //已经上传大小情况
        var tot = evt.total;                      //附件总大小
        var per = Math.floor(100 * loaded / tot);     //已经上传的百分比
        $("#son").html(per + "%");
        $("#son").css("width", per + "%");

    }

    function save(){
        if($("#src").val() ==null || $("#src").val()  == ''){
            return layer.msg("请先上传文件！",{icon: 2,time:2000});
        }
        let param = tools.formParams("save-module");
        if(tools.valid("save-module")){
            tools.post("/version/save",param,function(data){
                if(data.success){
                    layer.msg('保存成功', {icon: 1,time:1000},function(){
                        //刷新列表页面
                        toPage(null);
                        //关闭弹窗
                        layer.close(layer_addModule);
                    });
                }else{
                    tools.errorTip(data);
                }
            });
        }
    }

</script>
</html>